﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>在线转换示例</title>
    <link href="css/demo.css" rel="stylesheet" type="text/css">
    <!--Framework-->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <!--End Framework-->
    <script type="text/javascript">
        $(document).ready(function () {
            var fileObj = null;
            $("#file").change(function(e) {
                if (this.files.length > 0) {
                    var file = this.files[0];
                    fileObj = file;
                    var fsize = "0MB";
                    if (file.size < 1024) {
                        fsize = file.size + "B";
                    } else if (file.size / 1024 < 1024) {
                        fsize = Math.floor(file.size / 1024) + "KB";
                    } else if (file.size / 1024 > 1024) {
                        fsize = Math.floor(file.size / 1024 / 1024) + "MB";
                    }
                    $("#fileinfo").html("文件名: " + file.name + "<br /> 大&nbsp;&nbsp;&nbsp;小: "
                        + fsize + "<br /> 类&nbsp;&nbsp;&nbsp;型: " + file.type);
                    var ext = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
                    if (["doc","docx"].includes(ext)) {
                       change("word");
                       $("#app option:eq(1)").prop("selected",true);
                    } else if (["xls","xlsx"].includes(ext)) {
                       change("excel");
                       $("#app option:eq(2)").prop("selected",true);
                    } else if (["ppt","pptx"].includes(ext)) {
                       change("powerpoint");
                       $("#app option:eq(3)").prop("selected",true);
                    }
                } else {
                    fileObj = null;
                    $("#fileinfo").html("...");
                }
            });
            function change(val) {
                var vals = null;
                if (val == "word") {
                    vals = ["pdf","doc","docx","htm","html","mht","mhtml","rtf","txt","xml"];
                } else if (val == "excel") {
                    vals = ["pdf","xls","xlsx","csv","htm","html","mht","mhtml","txt","xml"];
                } else if (val == "powerpoint") {
                    vals = ["pdf","ppt","pptx","rtf","xml"];
                } else {
                    vals = ["pdf"];
                }
                var tohtml = "<option value='0'>--转换为--</option>";
                for (var i = 0; i < vals.length; i++) {
                    tohtml += "<option value='"+vals[i]+"'>"+vals[i]+"</option>"
                }
                $("#to").html(tohtml);
                $("#to option:eq(1)").prop("selected", true);
            }
            $("#app").on("change", function(e) {
                change(e.target.value);
            });
            $("#submit").click(function(e) {
                $("#submit").prop("disabled", true);
                $("#submit").addClass("animate");
                if (!fileObj) {
                    alert("未选择文件");
                    $("#submit").prop("disabled", false);
                    $("#submit").removeClass("animate");
                    return;
                }
                if (fileObj.size > 10 * 1024 * 1024) {
                    alert("请选择小于10M的文件");
                    $("#submit").prop("disabled", false);
                    $("#submit").removeClass("animate");
                    return;
                }
                var app = $("#app").val();
                if (app == "0") {
                    alert("请选择转换源");
                    $("#submit").prop("disabled", false);
                    $("#submit").removeClass("animate");
                    return;
                }
                var to = $("#to").val();
                if (to == "0") {
                    alert("请选择转换为");
                    $("#submit").prop("disabled", false);
                    $("#submit").removeClass("animate");
                    return;
                }
                var formData = new FormData();
                formData.append("file", fileObj);
                formData.append("app", app);
                formData.append("to", to);
                $.ajax({
                    url: "convert",
                    type: "post",
                    dataType: "json",
                    data: formData,
                    async: true,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        if (result.code == "2000") {
                            $("#message").html("转换成功，<a target='_blank' href='"+result.data+"'>点此查看</a>");
                            $("#submit").prop("disabled", false);
                            $("#submit").removeClass("animate");
                        } else {
                            $("#message").html(result.message);
                            $("#submit").prop("disabled", false);
                            $("#submit").removeClass("animate");
                        }
                    },
                    error: function (result) {
                        $("#message").html("未知错误，请重试");
                        $("#submit").prop("disabled", false);
                        $("#submit").removeClass("animate");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <section id="getintouch" class="fadeIn animated">
        <div class="container" style="border-bottom: 0;">
            <h1>
                <span>在线转换示例</span>
            </h1>
        </div>
        <div class="container">
            <div class="row clearfix">
                <div class="lbl">
                    <label for="file">
                        添加文件(10MB以内)</label>
                </div>
                <div class="ctrl">
                <span class="btn btn-success fileinput-button">
                    <span>选择文件或将文件拖放到此处...</span>
                    <input type="file" name="file" id="file" />
                    </span>
                </div>
            </div>
            <div class="row clearfix">
                <div class="lbl">
                    <label for="email">
                        文件信息</label>
                </div>
                 <div class="ctrl">
                    <div id="fileinfo">...</div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="lbl">
                    <label for="email">
                        转换</label>
                </div>
                <div class="ctrl">
                  <select id="app" name="app" style="width: 48%;" class="ccc">
                   <option value="0">--转换源--</option>
                   <option value="word">word</option>
                   <option value="excel">excel</option>
                   <option value="powerpoint">powerpoint</option>
                  </select>
                  <select id="to" name="to" style="width: 48%;" class="ccc">
                   <option value="0">--转换为--</option>
                   <option value="pdf">pdf</option>
                  </select>
                 </div>
            </div>
            <div class="row  clearfix">
                <div class="span10 offset2">
                    <input type="button" name="submit" id="submit" class="submit" value="开始转换">
                </div>
            </div>
            <div id="message"></div>
        </div>
    </section>
</body>
</html>
